Why I Created The Web Design Series

After deploying my personal digital garden by the Obsidian Digital Garden plugin, I wanted to put some cool little things on it to make it stand out and feel more "me" instead of just following a template. Along the way, I picked up some CSS and learned a bit about web design and code tracing – it’s been a fun journey!

Since I had zero front-end experience, my initial approach was pretty chaotic. I'd open up other people's GitHub Repos (also using DG), copy-paste their code piece by piece into mine, and see what happens – not the most efficient, but definitely an adventure! So I decided to document how I built some small, fun components here.

Along the way, I also have to thank the many people who’ve raised similar questions online, as well as those who took the time to provide solutions. Without their contributions, many of my issues wouldn’t have been solved. I hope this space can serve as a consolidated resource for others looking to build their own DG, making it easier for them to find useful information.

(Just to be clear, I can’t hand-code a website from scratch, but thanks to the seniors and friends from CKEFGISC, I can at least understand markup languages like HTML and figure out what each block is supposed to do.)

自從使用Digital Garden來佈署個人網頁後，為了實作一些小小的酷東西來彰顯自己與模板仔的不同讓網頁更有自己的個性，不知不覺就學了一點CSS和網頁設計的code tracing，滿妙的XD

然而由於自己完全沒有前端的知識，一開始想實作某個功能，就打開一樣使用DG佈署網頁的人的GitHub Repo，把每個元件的code一個一個複製到自己的code上面看看會發生什麼事，相當的暴力且耗時。所以想記錄一下一些小廢物小元件怎麼實作。

在這個過程中，也要感謝許多網友曾經提出過類似的問題，還有那些花時間回覆解決方案的人。沒有他們的貢獻，許多問題都無法順利解決。我希望這個地方能起到統整的作用，讓之後想要做自己的Digital Garden的人更容易找到相關的資料。

(雖然是這麼說，不過我的意思是我沒辦法手刻網頁。歸功於建北電資的學長姐和損友朋友們，我至少還看得懂HTML等markup languages，所以可以猜出每一個block在做什麼)